<template>
  <div class="chat-container">
    <!-- 聊天窗口头部 -->
    <div class="chat-header">
      <el-icon><Service /></el-icon>
      <span>在线客服</span>
    </div>

    <!-- 聊天消息区域 -->
    <div class="chat-messages" ref="messageContainer">
      <!-- 欢迎消息 -->
      <div class="message service-message">
        <el-avatar :size="40" class="service-avatar">
          <el-icon><Service /></el-icon>
        </el-avatar>
        <div class="message-content">
          <div class="message-text">
            <p>欢迎登陆充电站！</p>
            <p>Hi, 我是您的贴心客服管理！请问有</p>
            <p>什么可以帮助您解决？</p>
          </div>
          <span class="message-time">{{ formatTime(new Date()) }}</span>
        </div>
      </div>

      <!-- 用户消息列表 -->
      <div v-for="(msg, index) in messages" :key="index"
           :class="['message', msg.type === 'user' ? 'user-message' : 'service-message']">
        <el-avatar v-if="msg.type === 'service'" :size="40" class="service-avatar">
          <el-icon><Service /></el-icon>
        </el-avatar>
        <div class="message-content">
          <div class="message-text">{{ msg.content }}</div>
          <span class="message-time">{{ msg.time }}</span>
        </div>
        <el-avatar v-if="msg.type === 'user'" :size="40" :src="userAvatar" class="user-avatar">
          <el-icon><UserFilled /></el-icon>
        </el-avatar>
      </div>
    </div>

    <!-- 输入区域 -->
    <div class="chat-input">
      <div class="input-tools">
        <el-icon><Emoji /></el-icon>
        <el-icon><PictureRounded /></el-icon>
        <el-icon><Files /></el-icon>
      </div>
      <div class="input-area">
        <el-input
            v-model="inputMessage"
            type="textarea"
            :rows="3"
            placeholder="请输入消息..."
            @keyup.enter.native="sendMessage"
        />
        <el-button type="primary" @click="sendMessage">发送</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { Service, UserFilled, PictureRounded, Files } from '@element-plus/icons-vue'

const inputMessage = ref('')
const messages = ref([])
const messageContainer = ref(null)
const userAvatar = ref('')

// 格式化时间
const formatTime = (date) => {
  return date.toLocaleTimeString('zh-CN', { hour12: false })
}

// 发送消息
const sendMessage = async () => {
  if (!inputMessage.value.trim()) return

  // 添加用户消息
  messages.value.push({
    content: inputMessage.value,
    type: 'user',
    time: formatTime(new Date())
  })

  // 清空输入框
  inputMessage.value = ''

  // 模拟客服回复
  setTimeout(() => {
    messages.value.push({
      content: '您好，请问有什么可以帮您？',
      type: 'service',
      time: formatTime(new Date())
    })
    scrollToBottom()
  }, 1000)

  await nextTick()
  scrollToBottom()
}

// 滚动到底部
const scrollToBottom = () => {
  if (messageContainer.value) {
    messageContainer.value.scrollTop = messageContainer.value.scrollHeight
  }
}

onMounted(() => {
  // 获取用户头像
  userAvatar.value = localStorage.getItem('userAvatar') || ''
})
</script>

<style scoped>
.chat-container {
  width: 800px;
  height: 600px;
  margin: 20px auto;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.chat-header {
  padding: 16px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: bold;
}

.chat-messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: #f5f7fa;
}

.message {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  gap: 12px;
}

.service-message {
  justify-content: flex-start;
}

.user-message {
  justify-content: flex-end;
}

.message-content {
  max-width: 60%;
}

.message-text {
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}

.service-message .message-text {
  background: #fff;
}

.user-message .message-text {
  background: #95ec69;
}

.message-time {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
  display: block;
}

.chat-input {
  border-top: 1px solid #eee;
  padding: 16px;
}

.input-tools {
  padding: 8px;
  display: flex;
  gap: 16px;
  color: #666;
}

.input-area {
  display: flex;
  gap: 12px;
}

.input-area .el-textarea {
  flex: 1;
}

.el-button {
  align-self: flex-end;
}

/* 自定义滚动条样式 */
.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-track {
  background: #f5f7fa;
}
</style>